<template>
  <router-link class="flex justify-between text-[#e54c5f]" to="/exchange/market">
    <div class="flex items-center cursor-pointer">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <p class="pl-5">{{ $t('下单') }}</p>
    </div>
  </router-link>
  <el-card class="my-5">
    <div class="mb-4">
      <p>
        <span class="w-48 inline-block">{{ $t('商户名称') }}</span>
        <span>{{ form?.merchant?.name }}</span>
      </p>
    </div>

    <div class="mb-4">
      <p>
        <span class="w-48 inline-block">{{ $t('总金额') }}</span>
          <span>{{ numberToCurrencyNo(form.sell_amount) }} {{ form.sell_currency }}</span>
      </p>
    </div>
    <div class="mb-4">
      <p>
        <span class="w-48 inline-block">{{ $t('可卖出金额') }}</span>
          <span>{{ numberToCurrencyNo(form.left_amount) }} {{ form.sell_currency }}</span>
      </p>
    </div>
    <div class="my-5">
    <hr>
    </div>
    <div class="mb-4">
      <p>
        <span class="w-48 inline-block">{{ $t('价格') }}</span>
          <span>1 {{ form.sell_currency }} ≈ {{ form.price }} {{ form.buy_currency }}
              <!--（1 <el-text class="bg-gray-100">{{ form.buy_currency }}</el-text> ≈ {{ form.o_price }} <el-text class="bg-gray-100">{{ form.sell_currency }}</el-text>）-->
          </span>
      </p>
    </div>
    <div class="mb-2">
      <p class="flex">
        <span class="w-48 inline-block">{{ $t('卖出金额') }}</span>
        <el-input v-model="sell_amount" type="number" :placeholder="$t('请输入卖出金额')" clearable size="large"
          style="width: 400px" @change="onChangeSellAmount">
          <template #append>{{ form.buy_currency }}</template>
        </el-input>
      </p>
      </div>
    <div class="mb-4">
      <p class="flex">
        <span class="w-48 inline-block"></span>
      </p>
      <p class="text-right" style="width: 600px">
        <span class="w-48 inline-block"></span>
          <span class="text-[#7F7F7F] small">{{ $t('可用余额') }} {{ numberToCurrencyNo(form.balance) }} {{ form.balance_currency }}</span>
      </p>
    </div>
    <div class="mb-4">
      <p>
        <span class="w-48 inline-block">{{ $t('单笔买入限额') }}</span>
          <span>{{ numberToCurrencyNo(form.min_amount) }} {{ form.sell_currency }}
              - {{ numberToCurrencyNo(form.max_amount) }} {{ form.sell_currency }}</span>
      </p>
    </div>
    <div class="mb-4">
      <p class="flex">
        <span class="w-48 inline-block">{{ $t('买入金额') }}</span>
        <el-input v-model="amount" type="number" :placeholder="$t('请输入买入金额')" clearable size="large"
          style="width: 400px" @change="onChangeAmount">
          <template #append>{{ form.sell_currency }}</template>
        </el-input>
      </p>
   </div>
   <div class="mb-4">
      <p class="mt-4">
        <span class="w-48 inline-block">{{ $t('平台手续费') }}</span>
        <span>{{ form.fee_ratio }}%</span>
      </p>
    </div>
    <div class="mb-4">
      <p>
        <span class="w-48 inline-block"></span>
        <span class="text-[#7F7F7F]">{{ $t('预估手续费') }} {{ form.fee_ratio && amount ? (amount * form.fee_ratio / 100).toFixed(2) : '0' }}
            {{ form.sell_currency }}</span>
      </p>
    </div>
    <div class="mb-4">
      <p>
        <span class="w-48 inline-block"></span>
        <span class="text-[#7F7F7F]">{{ $t('预计可获得') }} {{ form.fee_ratio && amount ? (amount - amount * form.fee_ratio / 100).toFixed(2) : '0' }}
            {{ form.sell_currency }}</span>
      </p>
    </div>
    <div class="mb-4">
      <p class="flex">
        <span class="w-48 inline-block">{{ $t('下单时间') }}</span>
        <el-date-picker v-model="createtime" type="datetime" :placeholder="$t('请选择下单时间')" size="large" style="width: 400px" />
      </p>
    </div>
    <div class="mb-4">
      <p>
        <span class="w-48 inline-block"></span>
        <span class="text-[#7F7F7F]">
        <el-button type="primary" :icon="SuccessFilled" class="w-56 my-10" size="large" v-btn="['all', 'web_exchange_order_place']"
           @click="onSubmit" :disabled="disabled">{{ $t('确认下单') }}</el-button>
        </span>
      </p>
    </div>

  </el-card>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getEntDetailApi, orderStartApi } from "@/api/exchange/index";
import { ElMessage } from "element-plus";
import { SuccessFilled } from '@element-plus/icons-vue'
import { numberToCurrencyNo, timestamp } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { ...route } = useRoute();
const router = useRouter();
const loading = ref(false);
const disabled = ref(false);
const form = reactive({});
const amount = ref(); //卖出金额
const sell_amount = ref(); //买入金额
const createtime = ref();

onMounted(() => {
  if (route.query.order_no) {
    getData(route.query.order_no);
  }
});
const getData = async (order_no) => {
  loading.value = true;
  try {
    const res = await getEntDetailApi({ order_no: order_no });
    // console.log(res);
    Object.assign(form, res);
    loading.value = false;
    disabled.value = false;
  } catch (error) {
    // console.log(error);
    loading.value = false;
    disabled.value = true;
  }
};
const onChangeAmount = () => {
  sell_amount.value = (amount.value * Number(form.price)).toFixed(2);
}
const onChangeSellAmount = () => {
  amount.value = (sell_amount.value * Number(form.o_price)).toFixed(2);
}
const onSubmit = async () => {
  // console.log(amount.value, form.left_amount)
  if (amount.value > Number(form.left_amount)) {
    ElMessage({
      showClose: true,
      message: t("超出可兑换金额") + `${form.left_amount}`,
      type: "warning",
    });
    return;
  }
  if (amount.value > Number(form.max_amount)) {
    ElMessage({
      showClose: true,
      message: t("超出单笔最大金额") + ` ${form.max_amount}`,
      type: "warning",
    });
    return;
  }
  if (!amount.value || amount.value <= 0) {
    ElMessage({
      showClose: true,
      message: t("金额错误"),
      type: "warning",
    });
    return;
  }
  try {
    let ts = 0;
    if (createtime.value) {
      ts = createtime.value.valueOf();
    }
    const res = await orderStartApi({
      order_no: form.order_no,
      amount: Number(amount.value),
      createtime: timestamp(ts),
    });
    // console.log(res);
    ElMessage({
      showClose: true,
      message: t("下单成功"),
      type: "success",
    });
    router.replace(`/exchange/order`);
  } catch (error) {
    console.error("Error  ", error);
  }
};
</script>
<style>
.my-5{
  margin-top: 2rem;
    margin-bottom: 1rem;
    padding-left: 0.15rem;
}
.w-48{
  width: 13rem;
}
</style>
